<template>
	<div class="thePage flex-column">
		<div class="pg-title-dark">实习日记批阅</div>
				
		<div class="header flex-align">
			<img class="avatar" :src="avatar || defaultAvatar"></img>
			<div class="flex-column pl10">
				<div>{{name}}</div>
				<div>{{number}}</div>
			</div>
		</div>
			
		<div class="list overflow-y">				
			<div class="item flex-between b-line-half" v-for="(item, i) in listData" 
			:key="i" @click="onEdit">
				<div class="flex-1">{{item.title}}</div>
				<div>{{item.dtUpdate}}</div>
				<div :class="item.status=='未批阅' ? 'status0' : 'status1'">{{item.status}}</div>
			</div>	
		</div>
	</div>
</template>

<script>
export default {
	name: 'DiarySummaryList',
	data() {
		return {
			defaultAvatar:require("@/pics/default_avatar.png"),			
			keywords: '',
			name: '王某某',
			number: '2018080101',
			avatar: '',	
			listData: [
				{				
					title: "标题标题标题标题1" , //日记标题
					dtUpdate: "07.03", //时间
					status:"优秀",//状态 未批阅 优秀 良好 中等 及格 不及格
				},
				{
					title: "标题标题标题1" , //日记标题
					dtUpdate: "07.03", //时间
					status:"未批阅",//状态 未批阅 优秀 良好 中等 及格 不及格
				},
				{
					title: "标题标题121" , //日记标题
					dtUpdate: "07.03", //时间
					status:"优秀",//状态 未批阅 优秀 良好 中等 及格 不及格
				},
				{
					title: "标题1" , //日记标题
					dtUpdate: "07.03", //时间
					status:"良好",//状态 未批阅 优秀 良好 中等 及格 不及格
				},
				{
					title: "标题题标题1" , //日记标题
					dtUpdate: "07.03", //时间
					status:"良好",//状态 未批阅 优秀 良好 中等 及格 不及格
				},
				{
					title: "标题标1" , //日记标题
					dtUpdate: "07.03", //时间
					status:"未批阅",//状态 未批阅 优秀 良好 中等 及格 不及格
				},
				{
					title: "标题标题标标题1" , //日记标题
					dtUpdate: "07.03", //时间
					status:"未批阅",//状态 未批阅 优秀 良好 中等 及格 不及格
				},
				{
					title: "标题标题标标题1" , //日记标题
					dtUpdate: "07.03", //时间
					status:"未批阅",//状态 未批阅 优秀 良好 中等 及格 不及格
				},
				{
					title: "标题标题标1" , //日记标题
					dtUpdate: "07.03", //时间
					status:"未批阅",//状态 未批阅 优秀 良好 中等 及格 不及格
				},
				{
					title: "标题标题标标题1" , //日记标题
					dtUpdate: "07.03", //时间
					status:"中等",//状态 未批阅 优秀 良好 中等 及格 不及格
				},
				{
					title: "标题标题1" , //日记标题
					dtUpdate: "07.03", //时间
					status:"中等",//状态 未批阅 优秀 良好 中等 及格 不及格
				},
				{
					title: "标题标题标1" , //日记标题
					dtUpdate: "07.03", //时间
					status:"未批阅",//状态 未批阅 优秀 良好 中等 及格 不及格
				},
				{
					title: "标题标题标标题1" , //日记标题
					dtUpdate: "07.03", //时间
					status:"中等",//状态 未批阅 优秀 良好 中等 及格 不及格
				},
				{
					title: "标题标题1" , //日记标题
					dtUpdate: "07.03", //时间
					status:"中等",//状态 未批阅 优秀 良好 中等 及格 不及格
				},
				{
					title: "标题标题标1" , //日记标题
					dtUpdate: "07.03", //时间
					status:"未批阅",//状态 未批阅 优秀 良好 中等 及格 不及格
				},
				{
					title: "标题标题标标题1" , //日记标题
					dtUpdate: "07.03", //时间
					status:"中等",//状态 未批阅 优秀 良好 中等 及格 不及格
				},
				{
					title: "标题标题1" , //日记标题
					dtUpdate: "07.03", //时间
					status:"中等",//状态 未批阅 优秀 良好 中等 及格 不及格
				},
			],			
		};
	},
		
	methods: {		
		onEdit() {
			this.$router.push({ name: 'diaryStudentEdit' });
		}
	}
};
</script>

<style lang="less" scoped>
.header{
	margin-left: 20px;
	color: #3A3A3A;
	font-size: 16px;	
	line-height: 24px;
}
.avatar {
	 margin: 0 ;	
}

.list {		
	margin: 20px;	
	color: #3A3A3A;
	font-size: 14px;
	line-height: 36px;		
}

.item{
	margin-bottom: 10px;
	padding-left: 10px;
}

.status0,.status1{	
	width:20%;
	text-align: center;
	font-size: 12px;
	font-weight: 400;	
	line-height: 12px;	
}
.status0{		
	color: #959595;	
}
.status1{
	color: #FFB651;	
	&::before{
		content: "【";
	}
	&::after{
		content: "】";
	}	
}

</style>
